<template>
  <dialog_item :dialogTitle="$t('setRole')" @onBtnDialogClick="onBtnDialogClick" :visible.sync="dialogVisible" dialogClass="dialogHeight  roleDialog" :appendBody="true" dialogWidth="30%" :isShowConfirmBtn="true">
    <el-input size="mini"
      :placeholder="$t('msg_filter')"
      v-model="searchName">
    </el-input>
    <el-tree
    ref="role"
    node-key="roleId"
    :props="prop"
    show-checkbox
    :load="loadData"
    lazy
    :default-expanded-keys="expandedKeys"
    :default-checked-keys="precheckedNodes"
    @check="onCheck"
    :filter-node-method="filterNode"
    >

    </el-tree>
    </dialog_item>
</template>

<script>
export default {
  props: ["visible","deptRoleList","deptId"],
  data() {
    return {
      customApps:[],
      prop:{
        label:"roleName",
        isLeaf:"isLeaf",
      },
      expandedKeys:[],
      handleCheckedNode:[],
      precheckedNodes:[],
      checkedNode:[],
      searchName:"",
      havecheck:false,
      filterNodeArr:[],
      haveFilter:false,
      preFilterValue:"",
      checkedAllid:"",
    };
  },
  created(){
    let that=this;
    this.deptRoleList.applicationData.forEach(elm=>{
      elm.roleData.forEach(el=>{
        that.precheckedNodes.push(el.roleId);
        that.checkedNode.push(el);
      })
    })
  },
  mounted() {
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    }
  },
  watch: {
    searchName(val) {
      if(this.preFilterValue!=val){
        this.preFilterValue=val;
        this.filterNodeArr=[];
      }
      if(val==""){
        this.$refs.role.setChecked(this.checkedAllid,false)

      }
      this.$refs.role.filter(val);
    }
  },
  methods: {
    onBtnDialogClick(name){
      if(name=='confirm'){this.onOk()}
    },
    filterNode(value, data) {
      if (!value) {
        this.haveFilter=false;
        this.filterNodeArr=[];
        this.preFilterValue=""
        return true;
      }
      else {
        this.haveFilter=true;
      }
      if(data.roleName.indexOf(value) !== -1 && !data.allRole){
        this.filterNodeArr.push(data);
        return true;
      }else{
        return false;
      }
      // return data.roleName.indexOf(value) !== -1;
    },
    onCheck(obj,checkObj){
      this.havecheck=true;
      //无法获取到当前点击的节点状态,可以，用node-check绑定的事件，但是已经写好，没必要改
      this.checkedNode=checkObj.checkedNodes;
      let check=false;
      this.checkedNode.forEach(eleme=>{
        if(eleme.roleId==obj.roleId){
          check=true;
        }
      })
      let that=this;
      this.customApps.forEach(elm=>{
        if(obj.roleId==elm.id){
          that.checkedAllid=elm.id;
          if(check){
            if(that.haveFilter && that.filterNodeArr.length>0){
              //有筛选条件时的全选
              //对已筛选出来的节点判断是否处于这个软件，然后有的话再加上去
              let arr=[];
              that.filterNodeArr.forEach(el=>{
                if(el.applicationId==elm.id){
                  arr.push(el);
                }
              })
              that.checkedNode=Array.from(new Set([...arr,...that.checkedNode]));
            }else{
              that.checkedNode=Array.from(new Set([...elm.allRole,...that.checkedNode]));
            }
            that.checkedNode.forEach(el=>{
              that.$refs.role.setChecked(el.roleId,true)
            })
          }else{
            that.checkedNode.forEach((el,ind)=>{
              let have=false;
              if(that.haveFilter && that.filterNodeArr.length>0){
              //有筛选条件时的取消全选
                that.filterNodeArr.forEach(elem=>{
                  if(elem.applicationId==elm.id && el.roleId==elem.roleId){
                    have=true;
                  }
                })
              }else{
                elm.allRole.forEach(elem=>{
                  if(el.roleId==elem.roleId){
                    have=true;
                  }
                })
              }
              
              if(!have){
                that.$refs.role.setChecked(el.roleId,true)
              }
              else{
                that.$refs.role.setChecked(el.roleId,false)
                that.checkedNode[ind]={}
              }
            })
            
          }
        }else{
          return false;
        }
      })
    },
    onCancel(){
      this.dialogVisible = false;
      this.$emit("select-ok",this.deptRoleList);
    },
    onOk(){
      if(this.havecheck){
        let that=this;
        that.checkedNode.forEach(el=>{
              if(el!={}){
                let flag= this.deptRoleList.applicationData.some(depAppItem=>{ return depAppItem.applicationId === el.applicationId})
                if(!flag){
                   that.customApps.forEach(item=>{
                      if(item.id===el.applicationId){
                        this.deptRoleList.applicationData.push({applicationId:item.id,applicationName:item.name,roleData:[]}) 
                      }
                   })
                }
              }
          
        })
        this.deptRoleList.applicationData.forEach(elm=>{
          elm.roleData=[];
          that.checkedNode.forEach(el=>{
            if(el!={}){
              if(el.applicationId==elm.applicationId){
                let obj={roleId:el.roleId,roleName:el.roleName};
                elm.roleData.push(obj)
              }
            }
            
          })
        })
      }
      this.dialogVisible = false;
      this.$emit("select-ok",this.deptRoleList);

    },
    loadData(node,resolve){
      if (node.level === 0) {
        this.getrootinfo(resolve)
      } else  {
        this.getchildnode(node,resolve)
      } 
    },
    getrootinfo(resolve){
      let that=this;
      this.$api.getCustomAppConfig(
        { domainid: this.$route.query.domainid, data:{name: ""},  currpage: 1, pagelines: 100000 },
        {
          onSucess: resp => {
            let data = resp.data.data.datas;
            data.forEach(el=>{
              el.roleName = el.description ? el.description : el.name;
              el.roleId = el.id
              that.expandedKeys.push(el.id)
            })
            this.customApps=data;
            return resolve(data)

          }
        }
      )
    },
    getchildnode(node,resolve){
      let that=this;
      this.$api.getRoleList(
        { applicationid: node.data.id,
        pagelines:100000},
        {
          onSucess: resp => {
            let data = resp.data.data.role?resp.data.data.role:[];
            data.forEach(el=>{
              el.isLeaf=true;
              el.applicationId=node.data.id;
            })
            that.customApps.forEach(elm=>{
              if(elm.id==node.data.id){
                elm.allRole=data;
              }
            })
            return resolve(data)
          }
        }
      );
    }
  }
};
</script>

<style lang="scss" scoped>
</style>